import React, { Component } from "react";

/*
  state只有类组件有
  react的state就相当于vue的data,响应式数据
  state的定义要放在组件的里面
*/

// 放到组件的外面就没有响应式了
// const state = {
//   name: "tom",
//   age: 20,
//   likes: ["chang", "tiao"],
// };

class App extends Component {
  // 1. 可以直接在构造函数的构造器里面定义
  // constructor就是构造器, constructor在这个类被实例化的时候自动调用
  // constructor() {
  //   super();
  //   this.state = {
  //     name: "tom",
  //     age: 20,
  //     likes: ["chang", "tiao"],
  //   };
  // }

  // 2. 可以在类里面直接声明式地定义
  state = {
    name: "tom",
    age: 20,
    likes: ["chang", "tiao", "rap"],
    show: true,
    content: "<h1>标题</h1>",
  };

  render() {
    // console.log(this);
    // const {name, age, likes} = this.state;
    return (
      <>
        <h2>state</h2>
        <div>name: {this.state.name}</div>
        <div>age: {this.state.age}</div>
        {/* 条件渲染可以使用三目运算 */}
        {/* {this.state.show ? <div>你看到我了</div> : null} */}
        {/* 也可以使用短路运算的方式 */}
        {this.state.show && <div>你看到我了</div>}

        {/* 相当于v-show */}
        <div style={{ display: this.state.show ? "block" : "none" }}>
          你看到我了
        </div>

        {/* 相当于v-for, 循环渲染 */}
        {/* <ul>{this.state.likes}</ul> */}
        <ul>
          {this.state.likes.map((item, index) => {
            return (
              <li>
                {item} - {index}
              </li>
            );
          })}
        </ul>

        {/* 解析标签，相当于v-html */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }
}

export default App;
